<template>
  <section>
    <el-form-item label="最大分数">
      <el-input-number v-model="value.maxcount" @change="handleChange" :min="1" :max="10"></el-input-number>
    </el-form-item>
    <el-form-item label="是否显示文本">
      <el-switch v-model="value.isShowText" active-color="#13ce66" inactive-color="#ff4949">
      </el-switch>
    </el-form-item>
    <el-form-item label="显示文字" v-if="value.isShowText">
      <draggable :list="value.texts" :animation="340" group="selectItem" handle=".option-drag">
        <div v-for="(item, index) in value.texts" :key="index" class="select-item">
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <el-input v-model="value.texts[index]" placeholder="文本" size="small" />
        </div>
      </draggable>
    </el-form-item>
  </section>
</template>

<script>
  export default {
    props: {
      value: {
        value: Object,
        default: null
      },
    },
    watch: {
    	'value.maxcount': {
    		handler(newVal, oldVal) {
          console.log('---',newVal);
    			let that = this;
          let texts = [];
          for(let i=0;i<newVal;i++){
            if(that.value.texts.length>=i){
                texts[i] = that.value.texts[i];
            }else{
              texts[i] = "";
            }
          }
          that.value.texts = texts;
          console.log('---2',that.value.texts);
    		},
        deep: true
    	},
    },
    data() {
      return {
        sp: {},
        sr: {},
        param: {}
      }
    },
    created(options) {
      let that = this;
      that.xinit();
    },
    methods: {
      xinit() {
        let that = this;
      },
    }
  }
</script>

<style>
  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;

    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }

    & .el-input+.el-input {
      margin-left: 4px;
    }
  }

  .select-item+.select-item {
    margin-top: 4px;
  }

  .select-item.sortable-chosen {
    border: 1px dashed #409eff;
  }

  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #777;
  }

  .option-drag {
    cursor: move;
  }

  .hidden {
    display: none;
  }
</style>
